<template>
  <div class="tabs" :class="{'tabs-border': showBorder}">
    <div :class="'tabs-' + getTabsType() + '-bar'">
      <div v-for="(item,index) in navList" :class="tabCls(item)" @click="handleChange(index)" :style="getTabFontStyle()">
        {{ item.label }}
        <span v-if="ifShowClose(item)" class="close icon" @click.stop="closeTab(index)" />
      </div>
    </div>
    <div class="tabs-content">
      <slot />
    </div>
  </div>
</template>

<script>
export default {
  name: 'Tabs',
  props: {
    value: {
      type: [String, Number]
    },
    border: {
      type: Boolean,
      default: false
    },
    tabsType: {
      type: String,
      default: 'tab'
    },
    fontSize: {
      type: [String, Number],
      default: 16
    },
    fontColor: {
      type: String,
      default: '#000000'
    }
  },
  data() {
    return {
      defType: ['tab', 'card', 'card2', 'brief'],
      currentValue: this.value,
      showBorder: this.border,
      navList: []
    }
  },
  watch: {
    value: function(val) {
      this.currentValue = val
    },
    currentValue: function() {
      this.updateStatus()
    }
  },
  methods: {
    tabCls: function(item) {
      var active = ''
      var tabsType = this.getTabsType()
      var tabsBaseClass = 'tabs-' + tabsType

      if (item.name === this.currentValue) {
        active = 'tabs-' + tabsType + '-active'
      }

      return [
        tabsBaseClass,
        active
      ]
    },
    getTabs() {
      // 通过遍历子组件，得到所有的pane组件
      return this.$children.filter(function(item) {
        return item.$options.name === 'Pane' || item.$options.name === 'pane'
      })
    },
    updateNav() {
      this.navList = []
      var _this = this
      this.getTabs().forEach(function(pane, index) {
        _this.navList.push({
          label: pane.label,
          name: pane.name || index,
          closable: pane.closable
        })
        if (!pane.name) {
          pane.name = index
        }
        if (index == 0) {
          if (!_this.currentValue) {
            _this.currentValue = pane.name || index
          }
        }
      })
      this.updateStatus()
    },
    updateStatus() {
      var _this = this
      // 显示当前选中的tab对应的pane组件
      _this.getTabs().forEach(function(tab) {
        tab.show = tab.name === _this.currentValue
        // return
      })
    },
    handleChange: function(index) {
      var nav = this.navList[index]
      var name = nav.name
      // 更新当前选择的tab
      this.currentValue = name
      // 更新value
      this.$emit('input', name)
    },
    ifShowClose(item) {
      // 是否显示关闭标签按钮
      return item.closable
    },
    // 点击关闭按钮触发的事件
    closeTab(index) {
      // console.log(this.navList[index].name, this.currentValue);
      // 如果关闭的是当前选择的tab，则将currentValue转到前一个tab
      if (this.navList[index].name == this.currentValue) {
        let toIndex = index - 1
        toIndex = toIndex >= 0 ? toIndex : this.navList.length + toIndex
        console.log(toIndex)
        this.currentValue = this.navList[toIndex].name
      }
      // 关闭当前标签页
      this.navList.splice(index, 1)
    },
    // 根据组件属性tabsType 设置tabs头部样式
    getTabsType() {
      if (this.$data.defType.indexOf(this.tabsType) === -1) {
        return 'tab'
      }
      return this.tabsType
    },
    // 根据组件属性fontSize 设置tab 字体大小和颜色
    getTabFontStyle() {
      if (!/^#[0-9a-fA-F]{6}$/.test(this.fontColor)) {
        this.fontColor = '#000000'
      }
      if (!/^[1-3][0-9]$/.test(this.fontSize) || this.fontSize < 12) {
        this.fontSize = 16
      }
      return 'font-size: ' + this.fontSize + 'px; color: ' + this.fontColor
    }
  }
}
</script>
<style scoped>
</style>
